第三天的目標是設計網站的基本框架。我們將建立一個簡單的首頁佈局，包括導航欄和頁面佈局，並確保網站有統一的結構，方便未來添加其他頁面。

1.設計網站的導航欄
2.設置基本的頁面佈局
3.使用一些 CSS 來使網站具有基本的視覺效果

步驟 1：設計導航欄

首先，我們會創建一個導航欄，讓用戶可以在網站的不同頁面之間導航。導航欄通常會包含網站的名稱、商品分類鏈接、購物車按鈕和登入/註冊按鈕等。

1.建立一個新的 Navbar.js 組件來表示導航欄：

建立了一個簡單的 Navbar 組件，包含了一些常見的導航連結（首頁、產品頁、購物車頁、登入頁）。

// src/Navbar.js
import React from 'react';

function Navbar() {
  return (
    <nav className="navbar">
      <h1 className="logo">My E-Commerce</h1>
      <ul className="nav-links">
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/cart">Cart</a></li>
        <li><a href="/login">Login</a></li>
      </ul>
    </nav>
  );
}

export default Navbar;

2.在 App.js 中使用 Navbar：

在首頁中引入了導航欄，並使用 標籤來放置網站的主要內容。

// src/App.js
import React from 'react';
import Navbar from './Navbar';

function App() {
  return (
    <div>
      <Navbar />
      <main>
        <h1>Welcome to My E-Commerce Site</h1>
        <p>Browse our products and shop your favorites!</p>
      </main>
    </div>
  );
}

export default App;

步驟 2：設置頁面佈局

接下來，我們要確保網站有一個一致的佈局。這樣即使我們切換頁面，也能保持相同的網站結構。

1.在 App.js 中，我們可以將導航欄和頁面內容的結構進一步優化：
增加了一個 ，用來顯示版權信息。這樣，我們的頁面會有統一的導航欄、主內容區域和頁腳。

// src/App.js
import React from 'react';
import Navbar from './Navbar';

function App() {
 return (
   <div className="app-container">
     <Navbar />
     <main className="main-content">
       <h1>Welcome to My E-Commerce Site</h1>
       <p>Browse our products and shop your favorites!</p>
     </main>
     <footer className="footer">
       <p>&copy; 2024 My E-Commerce. All rights reserved.</p>
     </footer>
   </div>
 );
}

export default App;

步驟 3：使用 CSS 美化網站

現在，我們可以為導航欄和整體佈局添加一些基本的樣式，讓頁面看起來更美觀。

1.創建一個新的 CSS 文件 src/App.css，並加入以下樣式：

/* src/App.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.navbar {
  background-color: #333;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.nav-links a:hover {
  text-decoration: underline;
}

.main-content {
  flex: 1;
  padding: 2rem;
  text-align: center;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}

2.在 src/index.js 中引入這個樣式文件：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './App.css';  // 新增這一行
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

現在，我們的應用應該會有以下幾個區塊：
頁面的導航欄背景是深色，字體顏色為白色，並且有一些間距和對齊的設計。
主內容區域有足夠的間距，並且頁腳和導航欄都有一致的風格。

步驟 4：創建基本頁面結構

雖然我們還沒有實現所有的頁面，但我們可以先為主要的頁面建立基本的結構，讓導航欄能夠正常工作。

1.在 src 資料夾中，新增幾個頁面組件，例如 Home.js、Products.js、Cart.js 和 Login.js：

// src/Home.js
import React from 'react';

function Home() {
  return (
    <div>
      <h2>Home Page</h2>
      <p>Welcome to the home page of our e-commerce site.</p>
    </div>
  );
}

export default Home;

// src/Products.js
import React from 'react';

function Products() {
  return (
    <div>
      <h2>Products Page</h2>
      <p>Here are some products available for purchase.</p>
    </div>
  );
}

export default Products;

// src/Cart.js
import React from 'react';

function Cart() {
  return (
    <div>
      <h2>Shopping Cart</h2>
      <p>Your shopping cart is empty.</p>
    </div>
  );
}

export default Cart;

// src/Login.js
import React from 'react';

function Login() {
  return (
    <div>
      <h2>Login Page</h2>
      <p>Please login to access your account.</p>
    </div>
  );
}

export default Login;

步驟 5：整合 React Router 來管理路由

接下來，我們將使用 react-router-dom 來實現多頁應用的路由功能，讓我們可以在首頁、產品頁、購物車頁面和登入頁面之間導航。

1.安裝 React Router：

npm install react-router-dom

BrowserRouter 包裝了整個應用來管理路由，Switch 和 Route 用來定義不同的頁面路徑

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home';
import Products from './Products';
import Cart from './Cart';
import Login from './Login';

function App() {
  return (
    <Router>
      <div className="app-container">
        <Navbar />
        <main className="main-content">
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/products" component={Products} />
            <Route path="/cart" component={Cart} />
            <Route path="/login" component={Login} />
          </Switch>
        </main>
        <footer className="footer">
          <p>&copy; 2024 My E-Commerce. All rights reserved.</p>
        </footer>
      </div>
    </Router>
  );
}

export default App;

總結
第三天，我們設計了網站的基本框架，包含：

導航欄和頁面佈局
使用 CSS 美化網站
建立基本頁面
使用 React Router 來管理路由
這個基本結構將在未來的日子裡作為網站的骨架，讓我們可以逐步添加更多功能。